<template>
  <q-card class="fit overflow-hidden bg-white" :uuid="uuid">
    <div class="fit no-wrap column">
      <div v-if="!hideHeader" class="panel-header text-subtitle2 text-blue-grey-9 bg-white" style="padding: 5px 15px;border-bottom: 1px solid #e5e5e5;">标签列表</div>
      <q-scroll-area class="panel-body">
        <div class="usage-grid" :class="layoutClass" :style="layoutStyle" ref="usageGrid">
          <template v-for="(cfg) in tagCfgList">
            <div class="tag-area-item">
              <q-icon :name="cfg.icon" size="20px"></q-icon>
              <div class="tag-area-label">{{cfg.label}}</div>
            </div>
          </template>
        </div>
      </q-scroll-area>
    </div>
  </q-card>
</template>

<script setup>
import {onBeforeMount, onMounted, ref} from "vue"
import {treeFind, waitValue} from "dlsjs"
import Sortable from "sortablejs"
import {v4} from 'uuid'
import {clone} from "ramda"

const props = defineProps({
  tagList: Array,
  hideHeader: {
    default: true
  },
  layoutClass: Object,
  layoutStyle: Object,
  target: Object
})

const tagCfgList = ref([
  {label: '单行文本', icon: 'text_fields', vnode: {type: 'AnyInput', props: {type: 'input'}}},
  {label: '多行文本', icon: 'wysiwyg', vnode: {type: 'AnyInput', props: {type: 'textarea'}}},
  {label: '数字', icon: 'looks_one', vnode: {type: 'AnyInput', props: {type: 'number'}}},
])

onBeforeMount(() => {
  if(props.tagList) tagCfgList.value = props.tagList
  uuid.value = v4()
})

onMounted(() => {
  initDrag()
})

const uuid = ref()
const usageGrid = ref()
async function initDrag() {
  await waitValue(() => document.querySelector(`[uuid="${uuid.value}"] .usage-grid`), 5000)
  new Sortable(document.querySelector(`[uuid="${uuid.value}"] .usage-grid`),
    {
      handle: ``,
      animation: 150,
      group: {
        name: 'lc-editor',
        pull: 'clone',
        put: false
      },
      sort: false,
      onEnd: (e) => {
        if(props.target) {
          let match = treeFind([props.target], item => item.uuid === e.to.attributes.uuid?.value)
          if(match) match.children.splice(e.newIndex, 0, clone(props.tagList[e.oldIndex].vnode))
        }
      }
    }
  )
}

</script>

<style scoped lang="scss">
.usage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  grid-template-rows: repeat(auto-fill, max-content);
  padding: 10px;
}

.usage-item {
  display: grid;
  grid-template-rows: 34px 1px 1fr;
}

.header {
  font-size: 12px;
}

.usage-content-mini {
  padding: 10px;
}

.panel-header {
  height: 32px;
  border-bottom: 1px solid #e5e5e5;
}
.panel-body {
  height: 100%;
}
.tag-area-item {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  color: #333333;
  border: 1px solid #e5e5e5;
  background-color: #f4f4f4;
  border-radius: 5px;
  padding: 5px 10px;
  cursor: pointer;
  .tag-area-label {
    padding-left: 10px;
  }
}
</style>
